<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';

const props = defineProps({
  value: Array,
  data: Array,
  prop: String,
  refName: String,
  defaultSlot: Object,
  leftFooter: Object,
  rightFooter: Object,
  change: {
    type: Function,
    default: () => {}
  },
  leftCheckChange: {
    type: Function,
    default: () => {}
  },
  rightCheckChange: {
    type: Function,
    default: () => {}
  },
})

const val = ref(props.value)
watch(() => props.value, newVal => {
  val.value = newVal
})

const emit = defineEmits(['input', 'getRef'])
emit('input', val) // 传递给父组件

const transferRef = ref(null)
const name =  props.refName || `${props.prop}Ref`
onMounted(() => {
  emit('getRef', { name, value: transferRef.value })
})

const dSlot = defineComponent(props.defaultSlot)
const leftFooterSlot = defineComponent(props.leftFooter)
const rightFooterSlot = defineComponent(props.rightFooter)
</script>

<template>
  <el-transfer 
    ref="transferRef"
    v-model="val"
    :data="data" 
    v-bind="$attrs"
    @change="change"
    @left-check-change="leftCheckChange"
    @right-check-change="rightCheckChange">
    <template #default="{ option }" v-if="defaultSlot">
      <dSlot v-bind="option" />
    </template>
    <template #left-footer v-if="leftFooter">
      <leftFooterSlot />
    </template>
    <template #right-footer v-if="rightFooter">
      <rightFooterSlot />
    </template>
  </el-transfer>
</template>

<style lang="scss" scoped></style>
